﻿<div id="container" class="PageContainer">
    <hr />
    <a href="" style="margin-left:24px;" ng-click="backToList()" class="headerLink">back to list</a>
    <img id="waitImage" src="images/wait.gif" ng-show="loading" class="waitImage" style="z-index:100;" />

    <form name="groupForm">
        <div class="row">
            <div class="col-xs-10">
                <input type="text" ng-model="group.Name" placeholder="Name" class="form-control" style="width:40em; margin-left:12px; font-size:18px; font-weight:bold;" />
            </div>
            <div class="col-xs-2">
                <label>
                    <input ng-model="group.Archived" type="checkbox" ng-true-value="true" ng-false-value="false"
                           ng-change="setIsDirty()">Archived
                </label>
            </div>
        </div>
    </form>

    <uib-accordion>
        <uib-accordion-group style="margin-left:12px; margin-top:12px;" is-open="true">
            <uib-accordion-heading>
                <span>Variables</span>
            </uib-accordion-heading>
            <!-- ng-mousedown="$event.shiftKey && $event.preventDefault()" prevents IE from selecting other DOM elements on shift-click -->
            <div class="gridHalf" ui-grid="gridVariables" ui-grid-selection ui-grid-resize-columns
                 ng-dblclick="editVariable()" ng-mousedown="$event.shiftKey && $event.preventDefault()"></div>
        </uib-accordion-group>
    </uib-accordion>	    

    <div style="margin-top: 12px; text-align: center;">
        <button class="btn btn-default" ng-click="addVariable();" ng-disabled="loading">Add</button>
        <button class="btn btn-default" ng-click="editVariable();" ng-disabled="loading || selectedVariables.length == 0">Edit</button>
        <button class="btn btn-default" ng-click="removeVariables();" ng-disabled="loading || selectedVariables.length == 0">Remove</button>
        <input id="hiddenImport" style="display:none" type="file" on-read-file="importVariables(contents)" />
        <!-- We want to show the button instead of the input, so when the label is clicked, we're really clicking the input. -->
        <label for="hiddenImport"><button class="btn btn-default" ng-disabled="loading">Import</button></label>
        <button class="btn btn-default" ng-click="exportVariables();" ng-disabled="selectedVariables.length == 0 || loading">Export</button>
        <button class="btn btn-default" ng-click="saveVariableGroup();" ng-disabled="loading || !groupForm.$dirty">Save</button>
    </div>
</div>